<template>
	<view class="cpdd-date">
		<view class="flex-ac" @tap="handleOpenDate" style="position: relative;">
			<input type="text" v-model="innerValue" disabled class="flex1" :placeholder="placeholder"
				placeholder-class="plStyle" style="pointer-events: none;opacity: 0;" />
			<text class="showname bgfff" v-if="!disabled" :class="{'plStyle':!innerValue}">{{innerValue||placeholder}}</text>
			<text class="showname bgfff" v-else>{{innerValue||'-'}}</text>
			<text class="gui-icons f40 c999" v-if="!disabled">&#xe661;</text>
		</view>
		<gui-calendar :zIndex="10" ref="guicalendar" @confirm="handleChangeDate" :isTime="isTime"></gui-calendar>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			isTime: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			
		},
		watch: {
			value(val) {
				this.setDefault()
			}
		},
		data() {
			return {
				innerValue: '',
			}
		},
		created() {
			this.setDefault()
		},
		methods: {
			handleOpenDate(){
				if(this.disabled) return;
				this.$refs.guicalendar.open();
			},
			setDefault() {
				this.innerValue = ''
				if (!this.value) return;
				this.innerValue = this.value
			},
			handleChangeDate(e) {
				console.log('e',e);
				this.innerValue = e
				this.$emit('input', e)
				this.$emit('change', e)
			}

		}
	}
</script>

<style scoped>
	.showname {
		position: absolute;
		left: 0;
		width: 450rpx;
		overflow: hidden;
	}
</style>